{% extends 'base.html' %}
{% load l10n %}
{% load static %}
{% block title %}Covid19 por Município - {{ block.super }}{% endblock %}

{% block head %}
{{ block.super }}
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.10.16/css/dataTables.material.min.css">
<link rel="stylesheet" type="text/css" href="https://unpkg.com/leaflet@1.6.0/dist/leaflet.css"
  integrity="sha512-xwE/Az9zrjBIphAcBb3F6JVqxf46+CDLwfLMHloNu6KEQCAWi6HcDUbeOfBIptF7tcCzusKFjFw2yuvEpDL9wQ=="
  crossorigin="" />
<link rel="stylesheet" type="text/css" href="{% static 'covid19/css/map.css' %}" />
<script type="text/javascript" language="javascript" src="https://unpkg.com/leaflet@1.6.0/dist/leaflet.js"
  integrity="sha512-gZwIG9x3wUXg2hdXF6+rVkLF/0Vi9U8D2Ntg4Ga5I5BZpVkVxlJWbSQtXPSiUTtC0TjtGOmxa1AJPuV0CPthew=="
  crossorigin=""></script>
<script type="text/javascript" language="javascript"
  src="https://cdn.datatables.net/1.10.16/js/jquery.dataTables.min.js"></script>
<script type="text/javascript" language="javascript" src="https://www.chartjs.org/dist/2.9.3/Chart.min.js"></script>
<script type="text/javascript" language="javascript" src="{% static 'dashboard/js/chart.js' %}"></script>
<script type="text/javascript" language="javascript" src="{% static 'covid19/js/base.js' %}"></script>
<script type="text/javascript" language="javascript" src="{% static 'covid19/js/chart.js' %}"></script>
<script type="text/javascript" language="javascript" src="{% static 'covid19/js/table.js' %}"></script>
<script type="text/javascript" language="javascript" src="{% static 'covid19/js/map.js' %}"></script>

{% endblock %}

{% block nav %}
{% include 'covid19/links.html' %}
{% endblock %}

{% block content %}{% localize on %}
<div id="dashboard-header">
  <div class="card yellow lighten-5" style="padding: 20px; text-align: justify;">
    {% include 'covid19/text.html' %}
  </div>
</div>

<div style="margin-top:20px">
  <div style="padding: 5px;">
    <div class="row">
      <div class="col s12 m6 l6">
        <h1 style="padding-top:15px">
          {% if not state %}
          Localidade: Brasil
          {% else %}
          Localidade: {{ state_name }}
          {% endif %}
        </h1>
      </div>
      <div class="col s12 m6 l6">
        <div class="input-field" title="Selecione estado">
          <select id="state-select">
            <option value="{% url 'covid19:dashboard' %}" {% if not state %} selected {% endif %}>Brasil</option>
            {% for state_data in states %}
            <option {% if state == state_data.acronym %} selected {% endif %}
              value="{% url 'covid19:dashboard' state_data.acronym %}">{{ state_data.acronym }}</option>
            {% endfor %}
          </select>
          <label>Localidade</label>
        </div>
      </div>
    </div>
  </div>
  {% if not state %}
  <div class="row">
    {% for row in country_aggregate %}
    <div class="col s12 m4 xl2">
      <div class="card data-card tooltipped" data-position="bottom" data-tooltip="{{ row.tooltip }}">
        <div class="card-content">
          <p>{{row.title}}</p>
          <span class="number"><b>{{ row.value }}</b></span>
          {% if row.value_percent %}
          <span class="percent">({{ row.value_percent|floatformat:row.decimal_places }}%)</span>
          {% endif %}
        </div>
      </div>
    </div>
    {% endfor %}
  </div>
  {% else %}
  <div class="row">
    {% for row in state_aggregate %}
    <div class="col s12 m4 xl2">
      <div class="card data-card tooltipped" data-position="bottom" data-tooltip="{{ row.tooltip }}">
        <div class="card-content">
          <p>{{row.title}}</p>
          <span class="number"><b>{{ row.value }}</b></span>
          {% if row.value_percent %}
          <span class="percent">({{ row.value_percent|floatformat:row.decimal_places }}%)</span>
          {% endif %}
        </div>
      </div>
    </div>
    {% endfor %}
  </div>
  {% endif %}
  <div class="row">
    <!-- Map -->
    <div id="map-col" class="col l12 m12 s12 xl6">
      <div class="card">
        <div class="card-content" style="padding: 15px;">
          <div id="loading">
            <span class="center-align valign-wrapper">
              <img src="{% static 'covid19/img/loading.gif' %}" alt="Carregando" />
              &nbsp;
              Carregando mapa...
            </span>
          </div>
          <div id="map"></div>
          <div class="p-b-5">
            <label class="right">Nota: casos importados não estão representados no mapa.</label>
          </div>
        </div>
      </div>
    </div>
    <!-- Table -->
    <div id="table-col" class="col l12 m12 s12 xl6">
      <div class="card">
        <div class="card-content">
          <div class="row">
            <div id="table-col" style="padding:30px; max-height: 857px; overflow: hidden;">
              <table class="table mdl-data-table">
                <thead>
                  <tr>
                    <th> Data </th>
                    <th> Município </th>
                    {% if not state %}<th> UF </th>{% endif %}
                    <th> Confirmados </th>
                    <th> Confirmados<br>por 100k hab. </th>
                    <th> Óbitos </th>
                    <th> Letalidade </th>
                    <th> Óbitos<br>por 100k hab. </th>
                  </tr>
                </thead>

                <tbody>
                  {% for row in city_data %}
                  <tr>
                    <td data-search="{{ row.date|date:"d/m/Y" }}"
                      data-order="{% localize off %}{{ row.date_str }}{% endlocalize %}"> {{ row.date|date:"d/m/Y" }}
                    </td>
                    <td data-search="{{ row.city_str }} {{ row.city }}" data-order="{{ row.city_str }}"> {{ row.city }}
                    </td>
                    {% if not state %}<td data-search="{{ row.state }}"> <a
                        href="{% url 'covid19:dashboard' row.state %}" title="{{ row.state }}">{{ row.state }}</a> </td>
                    {% endif %}
                    <td data-order="{% localize off %}{{ row.confirmed }}{% endlocalize %}"> {{ row.confirmed }} </td>
                    <td data-order="{% localize off %}{{ row.confirmed_per_100k_inhabitants }}{% endlocalize %}">
                      {{ row.confirmed_per_100k_inhabitants|floatformat:2 }} </td>
                    <td data-order="{% localize off %}{{ row.deaths }}{% endlocalize %}"> {{ row.deaths }} </td>
                    <td data-order="{% localize off %}{{ row.death_rate_percent }}{% endlocalize %}">
                      {{ row.death_rate_percent|floatformat:2 }}% </td>
                    <td data-order="{% localize off %}{{ row.deaths_per_100k_inhabitants }}{% endlocalize %}">
                      {{ row.deaths_per_100k_inhabitants|floatformat:2 }} </td>
                  </tr>
                  {% endfor %}
                </tbody>
              </table>
              <p class="right-align" style="margin-top: 15px;">
                <a class="btn"
                  href="{% url 'core:dataset-table-detail' 'covid19' 'caso' %}?is_last=True&amp;place_type=city{% if state %}&amp;state={{ state }}{% endif %}&amp;format=csv">
                  Baixar dados em CSV
                </a>
              </p>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
  <!-- Charts -->
  <div class="row">
    <div class="col s12 xl6">
      <div class="card">
        <div class="card-content">
          <div class="chart">
            <canvas id="case-daily-chart-1"></canvas>
          </div>
        </div>
      </div>
    </div>
    <div class="col s12 xl6">
      <div class="card">
        <div class="card-content">
          <div class="chart">
            <canvas id="death-daily-chart-1"></canvas>
          </div>
        </div>
      </div>
    </div>
    <div class="col s12 xl6">
      <div class="card">
        <div class="card-content">
          <div class="chart">
            <canvas id="case-daily-chart-2"></canvas>
          </div>
        </div>
      </div>
    </div>
    <div class="col s12 xl6">
      <div class="card">
        <div class="card-content">
          <div class="chart">
            <canvas id="death-daily-chart-2"></canvas>
          </div>
        </div>
      </div>
    </div>
    <div class="col s12 xl6">
      <div class="card">
        <div class="card-content">
          <div class="chart">
            <canvas id="death-weekly-2020-chart"></canvas>
          </div>
        </div>
      </div>
    </div>
    <div class="col s12 xl6">
      <div class="card">
        <div class="card-content">
          <div class="chart">
            <canvas id="death-weekly-years-chart"></canvas>
          </div>
        </div>
      </div>
    </div>
    <div class="col s12 xl6">
      <div class="card">
        <div class="card-content">
          <div class="chart">
            <canvas id="death-weekly-excess-chart-1"></canvas>
          </div>
        </div>
      </div>
    </div>
    <div class="col s12 xl6">
      <div class="card">
        <div class="card-content">
          <div class="chart">
            <canvas id="death-weekly-excess-chart-2"></canvas>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

{% endlocalize %}
{% endblock %}

{% block script %}
{{ block.super }}
<script type="text/javascript">
var dataURL = {
  cities: "{% url 'covid19:cities-cases' %}{% if state %}?state={{ state }}{% endif %}",
  stateGeoJSON: "{% url 'covid19:states-geo' %}{% if state %}?state={{ state }}{% endif %}",
  cityGeoJSON: "{% url 'covid19:cities-geo' %}{% if state %}?state={{ state }}{% endif %}",
  historicalDaily: "{% url 'covid19:historical-daily' %}{% if state %}?state={{ state }}{% endif %}",
  historicalWeekly: "{% url 'covid19:historical-weekly' %}{% if state %}?state={{ state }}{% endif %}",
};
var selectedStateId = {% if not state_id %}undefined{% else %}{{ state_id }}{% endif %};
var selectedStateAcronym = {% if not state_id %}undefined{% else %}"{{ state }}"{% endif %};
var selectedCitySlug = {% if not city_id %}undefined{% else %}"{{ city_slug }}"{% endif %};

jQuery(document).ready(function(){
  jQuery('.tooltipped').tooltip();
  $('select').formSelect();
  $('#state-select').on('change', function () {
        return $(this).val() ? window.location = $(this).val() : false;
    });
});
</script>
{% endblock %}
